<template>
  <div class="app-container">
    <!-- 公共顶部 -->
    <large-screen-header to="/securityActivity" back="true"></large-screen-header>
    <!-- 主体部分 -->
    <div class="bottomBox">
      <!-- 左侧 -->
      <div class="leftBox">
        <importantLeft />
      </div>
      <!-- 中间 -->
      <div class="centerBox">
        <headline :name="'党的二十大'" />
        <div class="botBox">
          <p class="botBox-box">
            <!-- 地图 -->
            <IndexMap></IndexMap>
          </p>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="rightBox">
        <div class="imgShowBox">
          <subheadings :name="'严重破坏和毁坏风险占比统计'" />
          <div id="chart">
            <div id="chart-box">
              <SeriousDamage v-if="isShow" :data="ProportionStatisticsList"/>
            </div>
            <div id="chart-box">
              <destroyChart :data="ProportionStatisticsList"/>
            </div>
          </div>
          <div class="char">
            <span class="char-des">严重破坏</span>
            <span class="char-des">毁坏</span>
          </div>
          <div class="lsBox">
            <span class="lsBox-des">对于严重破坏和毁坏风险的隐患房屋建议</span>
          </div>
          <div class="txtBox">
            <div class="txtBox-item">
              <span class="txtBox-img">
                <span class="txtBox-num">1</span>
              </span>
              <span class="txtBox-des"> 优先对重点地区和重点关注的房屋建筑，尽快开展详细的抗震性能鉴定 </span>
            </div>
            <div class="txtBox-item">
              <span class="txtBox-img">
                <span class="txtBox-num">2</span>
              </span>
              <span class="txtBox-des">
                对于抗震性能鉴定不达标的房屋建筑，尽快制定抗震加固改造方案，分阶段推进加固改造，消减地震灾害风险隐患
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import IndexMap from '@/views/important/map/index.vue';
import SeriousDamage from './components/SeriousDamage.vue';
import destroyChart from './components/destroyChart.vue';
import { getProportionStatistics,getZdcs } from '@/api/securityActivity.js';
import { useRouter } from "vue-router"; 

const route = useRoute();

// 严重破坏和毁坏风险占比统计
const ProportionStatisticsList=ref([])
const isShow=ref(false)
getData()

function getData(){
  getProportionStatistics({iaId:route.query.iaId}).then(res=>{
    console.log(res)
    ProportionStatisticsList.value=res.data
    isShow.value=true
  })
}

</script>
<style scoped lang="scss">
.app-container {
  background-image: url('../../assets/images/common/common_title.png') !important;
  // background: url("../../assets/images/common/common_title.png") no-repeat;
  //   background-size: 100% 100%;
  .el-table .el-table__cell {
    padding: 0px 0 !important;
    height: 25px !important ;
    line-height: 25px !important;
  }
  .bottomBox {
    width: 100%;
    display: flex;
    padding: 0 30px;
    box-sizing: border-box;
    height: calc(100% - 90px);
    .leftBox {
      margin-top: 10px;
      width: 450px;
      .imgShowBox {
        width: 450px;
        height: 420px;
        // background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
        // opacity: .85;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        margin-bottom: 24px;
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        &:nth-child(2) {
          height: 240px;
        }
        &:nth-child(3) {
          height: 200px;
        }
        .upBox {
          width: 100%;
          text-align: center;
          .upArrow {
            margin: -44px 0 54px 0px;
            cursor: pointer;
          }
        }
        .downBox {
          width: 100%;
          text-align: center;
          .downArrow {
            margin: -64px 0 54px 0px;
            cursor: pointer;
          }
        }
        .imgtop {
          color: white;
          font-size: 20px;
        }
        .conBox {
          width: 100%;
          display: flex;
          color: #e6f4fd;
          font-size: 14px;
          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
          font-weight: 400;
          flex-direction: column;
          justify-content: center;
          margin: -34px 0 44px 0px;
          padding: 0 18px;
          box-sizing: border-box;
          .el-table .el-table__header-wrapper th {
            background-color: none;
            color: #fff;
          }
          .el-table .el-table__cell {
            height: 15px !important;
          }
          &-textStyle {
            display: block;
            width: 424px;
            height: 14px;
            line-height: 24px;
            border-radius: 0px 0px 0px 0px;
            font {
              padding: 0 14px;
              border-bottom: 1px solid #475adb;
            }
          }
          .textStyle {
            width: 426px;
            display: flex;
            padding: 2px 10px;
            span {
              display: inline-block;
              width: 90px;
              height: 14px;
              font-size: 14px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              text-align: center;
              color: #e6f4fd;
              line-height: 34px;
            }
          }
        }
        .imgBox {
          height: 320px;
          margin: -54px 0 54px 20px;
          overflow-y: auto;
          &-item {
            padding-bottom: 20px;
            position: relative;
            height: 150px;
            margin-bottom: 10px;
          }
          &-img {
            width: 410px;
            height: 150px;
          }
          &-txt {
            position: absolute;
            bottom: -12px;
            left: 0px;
            width: 410px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            background: #475adb;

            border-radius: 0px 0px 0px 0px;
            span {
              display: block;
              width: 112px;
              height: 16px;
              font-size: 16px;
              font-family: Source Han Sans CN-Regular, Source Han Sans CN;
              font-weight: 400;
              color: #ffffff !important;
              line-height: 16px;
            }
          }
        }
        .imgBox::-webkit-scrollbar {
          display: none; /* Chrome Safari */
        }
        .pStyle {
          padding: 0 20px;
          margin-top: -20px;
          span {
            width: 411px;
            height: 58px;
            font-size: 18px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #46ffff;
            border-bottom: 1px solid #46ffff;
          }
        }
      }
    }
    .centerBox {
      flex: 1;
      .head {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        img {
          width: 501px;
          height: 71px;
        }
        p {
          position: absolute;
          left: 40%;
          bottom: 0%;
          width: 150px;
          height: 30px;
          font-size: 30px;
          font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
          font-weight: normal;
          color: #46ffff;
          line-height: 46px;
        }
      }
      .botBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        &-box {
          width: 860px;
        }
        img {
          width: 860px;
          height: 640px;
        }
      }
    }
    .rightBox {
      margin-top: 10px;
      width: 450px;
      .imgShowBox {
        width: 450px;
        height: 940px;
        // background: linear-gradient(135deg, #00032D 0%, #000C58 50%, #00032D 100%);
        // opacity: .85;
        background: linear-gradient(
          135deg,
          rgba(0, 3, 45, 0.85) 0%,
          rgba(0, 12, 88, 0.85) 50%,
          rgba(0, 3, 45, 0.85) 100%
        );
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 450px;
          height: 20px;
          background-size: 100% 100%;
          background-image: url('../../assets/images/common/bg_bottom.png') !important;
          position: absolute;
          bottom: -10px;
        }
        &:nth-child(2) {
          height: 240px;
        }
        #chart {
          width: 100%;
          height: 160px;
          padding: 7px 20px;
          box-sizing: border-box;
          display: flex;
          text-align: center;
          justify-content: center;
          &-box {
            width: 160px;
            height: 160px;
            margin: 0 10px;
          }

          &-item {
            width: 160px;
            height: 160px;
            padding-bottom: 25px;
            div {
              width: 160px;
              height: 160px;
            }
          }
          &-items {
            width: 160px;
            height: 160px;
          }
        }
        .char {
          display: flex;
          height: 100px;
          align-items: center;
          width: 100%;
          .char-des {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 35px;
            font-size: 20px;
            text-align: center;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            padding: 20px;
            // display: block;
            color: #ffe850 !important;
          }
          .char-des:nth-child(1) {
            margin-left: 75px;
            background-image: url('../../assets/images/anbao/bg_yellow.png');
          }
          .char-des:nth-child(2) {
            margin-left: 65px;
            background-image: url('../../assets/images/anbao/bg_orange.png');
          }
        }
        .lsBox {
          width: 450px;
          height: 50px;
          background-image: url('../../assets/images/anbao/small_border.png') !important;
          background-size: 100% 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          &-des {
            display: block;
            width: 360px;
            height: 20px;
            font-size: 20px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            font-weight: 500;
            color: #46ffff;
            line-height: 20px;
          }
        }
        .txtBox {
          padding: 20px;
          box-sizing: border-box;
          &-item {
            width: 410px;
            min-height: 60px;
            background: rgba(71, 90, 219, 0.15);
            border-radius: 0px 0px px 0px;
            margin: 9px 0 29px 0;
            display: flex;
            align-items: center;
            // justify-content: center;

            span {
              //   display: block;
            }
          }
          &-img {
            width: 63px;
            height: 68px;
            background-image: url('../../assets/images/anbao/hexagon.png') !important;
            background-size: 100% 100%;
            line-height: 68px;
            display: flex;
            justify-content: center;
          }
          &-num {
            width: 12px;
            height: 23px;
            font-size: 20px;
            font-family: Helvetica Neue LT Pro-66 Medium Italic, Helvetica Neue LT Pro;
            font-weight: normal;
            color: #ffb35b;
          }
          &-des {
            width: 322px;
            min-height: 42px;
            font-size: 16px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            font-weight: 400;
            color: #a1cbfd;
            line-height: 24px;
            -webkit-text-stroke: 1px rgba(0, 0, 0, 0);
            text-stroke: 1px rgba(0, 0, 0, 0);
          }
        }
      }
    }
  }
}
</style>
